<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>

<html>

	<head>
	
	    <meta charset="utf-8"/>
	    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	    <meta name="viewport" content="width=device-width, initial-scale=1"/>
	    <meta name="description" content=""/>
	    <meta name="author" content=""/>
		<meta name="_csrf" content="${_csrf.token}"/>
	    <meta name="_csrf_header" content="${_csrf.headerName}"/>
	    
	    <title>HappyHome Admin</title>
	
	    <!-- Bootstrap Core CSS -->
	    <link href="<c:url value="/resources/admin/css/bootstrap.min.css"/>" rel="stylesheet"/>
	
	    <!-- Custom CSS -->
	    <link href="<c:url value="/resources/admin/css/sb-admin.css"/>" rel="stylesheet"/>
	
	    <!-- Custom Fonts -->
	    <link href="<c:url value="/resources/admin/font-awesome-4.1.0/css/font-awesome.min.css"/>" rel="stylesheet" type="text/css"/>
	
		<!-- datepicker plugin, css -->
	    <link href="<c:url value="/resources/datepicker/bootstrap.css"/>" rel="stylesheet"/>
	    <link href="<c:url value="/resources/datepicker/datepicker.css"/>" rel="stylesheet"/>
	    <!-- /datepicker plugin, css -->
	    
	    <!-- ckeditor plugin -->
	    <script src="<c:url value="/resources/ckeditor/ckeditor.js"/>" type="text/javascript"></script>
	    <!-- end ckeditor -->
	    
	    <!-- currency plugin-->
	    <!-- jQuery Version 1.11.0 -->
	    <script src="<c:url value="/resources/admin/js/jquery-1.11.0.js"/>"></script>
	    <script src="<c:url value="/resources/currency/jquery.number.js"/>"></script>
	    
    </head>

	<body>
	<div id="wrapper">
        <!-- Navigation -->
        <%@ include file="/WEB-INF/pages/admin/navigation.jsp" %>

        <div id="page-wrapper">

            <div class="container-fluid">
            	<div class="row">
                    <div class="col-lg-12">
                        <h1 class="page-header">
                            Add Description To Images
                        </h1>
                        <ol class="breadcrumb">
                            <li class="active">
                                <i class="fa fa-dashboard"></i> Dashboard
                            </li>
                        </ol>
                    </div>
                </div>
				<c:if test="${not empty images}">
					<input type="hidden" value="${fn:length(images)}" id ="numberImages"/>
					<c:forEach var="image" items="${images }" varStatus="counter">
						<div class="col-md-12">
							<div class="col-md-4">
								<img src="${image.thumbnailUrl }"/>
							</div>
							<div class="col-md-8">
								<input name="description" value="${image.contentType }" id="imageId${counter.count }"/>
							</div>
						</div>
						<hr class="col-md-12"/>
					</c:forEach>
					<div class="row">
			           	<div class="col-lg-12">     
			              	<button type="submit" class="btn btn-default col-lg-1" onclick="gotoAlert()">
			              		<span class="glyphicon glyphicon-off"></span>
								<spring:message code="message.ExitButton" text="default text" />
							</button>
							<button type="button" class="btn btn-default col-lg-1" onclick="gotoAlert()">
			              		<span class="glyphicon glyphicon-off"></span>
								<spring:message code="message.ExitButton" text="default text" />
							</button>
						</div>
			        </div>
				</c:if>
			</div>
		</div>
	</div>
	<!-- Bootstrap Core JavaScript -->
    <script src="<c:url value="/resources/admin/js/bootstrap.min.js"/>"></script>
    <script type="text/javascript">
    	function gotoAlert(){
    		var value = $('#numberImages').val();
    		alert(value);
    	}
    </script>
	</body>

</html>